@extends('layouts.site')
@section('stylesheet')
    <link rel="stylesheet" href="/assets/css/component.css">
    <link rel="stylesheet" href="/assets/css/senior.css">
    <style>
        .photostack-img > img {
            width: 240px;
            height: 240px;
        }
    </style>
@endsection
@section('content')
<!-- Main -->
<article id="main">

    <header class="special container">
        <span class="icon fa-graduation-cap"></span>
        <h2><strong>成功者的履历</strong></h2>
        <p>——学姐学长们的丰功伟绩😂</p>
    </header>

    <section id="senior-photo" class="photostack">
        <div>
            @foreach($seniors as $s)
            <figure>
                <a href="#" class="photostack-img">
                    <img src="
                    @if($s->image)
                        {{$storage}}{{$s->image}}
                    @else
                            /images/demo{{($s->id)%8}}.jpg
                    @endif" alt="{{$s->name}}"/>
                </a>
                <figcaption>
                    <h2 class="photostack-title">@if($s->name){{$s->name}}@else{{$s->school_name}}@endif</h2>
                    <div class="photostack-back">
                        <table>
                            <tr><td>TOEFL GRADE:</td><td>@if($s->toefl_grade){{$s->toefl_grade}}@else--@endif</td></tr>
                            <tr><td>IELTS:</td><td>@if($s->ielts){{$s->ielts}}@else--@endif</td></tr>
                            <tr><td>SAT/ACT:</td><td>@if($s->sat_act_grade){{$s->sat_act_grade}}@else--@endif</td></tr>
                            <tr><td>IB GRADER:</td><td>@if($s->ib_grade){{$s->ib_grade}}@else--@endif</td></tr>
                        </table>
                        {{--<p>TOEFL GRADE: {{$s->toefl_grade}}</p>--}}
                        {{--<p>IELTS: {{$s->ielts}}</p>--}}
                        {{--<p>SAT/ACT GRADER:{{$s->sat_act_grade}}</p>--}}
                        {{--<p>IB GRADER: {{$s->ib_grade}}</p>--}}
                    </div>
                </figcaption>
            </figure>
            @endforeach
        </div>
    </section>

</article>
@endsection
@section('javascript')
    <script src="/assets/js/modernizr.min.js"></script>
    <script src="/assets/js/classie.js"></script>
    <script src="/assets/js/photostack.js"></script>
    <script>
        new Photostack( document.getElementById( 'senior-photo' ), {
            callback : function( item ) {
                //console.log(item)
            }
        } );
        $('.photostack-img').on('click',function(){
            $('#senior-photo span.current').click();
        });
    </script>
@endsection